<template>
  <div ref="root">
    <!-- Component  -->
    <fullscreen v-model="showfullscreen"> content </fullscreen>
    <!-- Api  -->
    <button type="button" @click="toggleApi">FullscreenApi</button>
    <!-- Directive  -->
    <button type="button" v-fullscreen>FullscreenDirective</button>
  </div>
</template>
<script lang="ts">
import { ref, defineComponent, toRefs, reactive, provide } from 'vue'
export default defineComponent({
  methods: {
    toggleApi() {
      console.log(this)
      this.$fullscreen.toggle()
    },
  },
  provide() {
    return {
      toggleApi: this.toggleApi,
    }
  },
  setup() {
    const root = ref()
    const state = reactive({
      showfullscreen: true,
    })
    function toggle() {
      // state.showfullscreen = false
    }
    return {
      root,
      ...toRefs(state),
      toggle,
    }
  },
})
</script>
